<template>
	<view class="container">
		<swiper class="swiper" :style="{width:banner_w,height:banner_h}" :indicator-dots="true" :autoplay="true" :interval="10000" :duration="4000">
			<swiper-item v-for="(value,key) in banner" :id="value.adv_id" :key="key">
				<block v-if="value.position==0">
					<block v-if="value.type==0">
						<image mode="widthFix" :style="{width:banner_w,height:banner_h}" :id="value.adv_id" :src="url+value.img" v-on:click="clickImg(url+value.img)"></image>
					</block>
					<block v-if="value.type==3">
						<image :style="{width:banner_w,height:banner_h}" :src="url+value.img"></image>
					</block>
					<block v-else>
						<image :style="{width:banner_w,height:banner_h}" :id="value.adv_id" :src="url+value.img" v-on:click="link(value.type,value.id)"></image>
					</block>
				</block>
			</swiper-item>
		</swiper>
		<view>
			<uni-notice-bar background-color="#fff" color="#666666" showIcon scrollable text="会员活动日送大礼包"></uni-notice-bar>
		</view>

		<swiper class="swiper" :style="{width:banner_w,height:banner_h}" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="2000">
			<swiper-item v-for="(value,key) in banner1" :id="value.adv_id" :key="key">
				<block v-if="value.position==1">
					<block v-if="value.type==0">
						<image mode="widthFix" :style="{width:banner_w,height:banner_h}" :id="value.adv_id" :src="url+value.img" v-on:click="clickImg(url+value.img)"></image>
					</block>
					<block v-if="value.type==3">
						<image :style="{width:banner_w,height:banner_h}" :src="url+value.img"></image>
					</block>
					<block v-else>
						<image :style="{width:banner_w,height:banner_h}" :id="value.adv_id" :src="url+value.img" v-on:click="link(value.type,value.id)"></image>
					</block>
				</block>
			</swiper-item>
		</swiper>

		<view class="promotion_entrance" v-on:click="tongdao">
			<image :style="{width:tongdao_w,height:tongdao_h}" :src="'https://zhangjie.jdmuguzhid.com/uploads/通道gai.jpg'"></image>
		</view>

		<view class="promotion_entrance" v-on:click="jifenshangcheng">
			<image :style="{width:shangcheng_w,height:shangcheng_h}" :src="'https://zhangjie.jdmuguzhid.com/uploads/商城1.jpg'"></image>
		</view>
		<view class="hot_goods" v-if="specs_area.length>0">
<!--			<view class="hot_goods_head" data-type="1" v-on:click="goods_list">-->
			<view class="hot_goods_head" data-type="1">
				<view class="head_title">热销商品</view>
<!--				<view class="hot_more">更多<image mode="widthFix" src="../../static/images/more.png"></image></view>-->
			</view>
			<view class="hot_goods_list">
				<view class="hot_goods_unit" v-for="(item,index) in specs_area" :key="index" :id="item.goods_id" v-on:click="goods_detail">
					<image class="hot_goods_unit_pic" :style="{height:hot_pic_h}" mode="aspectFill" :src="url+item.imgurl"></image>
					<view class="hot_goods_unit_title">{{item.goods_name.substr(0,5)}}…</view>
					<view class="hot_goods_unit_price">￥{{item.price}}</view>
				</view>
			</view>
		</view>

<!--		<view class="sort_title" v-if="recommend.length>0" data-type="3" v-on:click="goods_list">-->
		<view class="sort_title" v-if="recommend.length>0" data-type="3">
			<view class="title_name">产品推荐</view>
<!--			<image class="more" src="../../static/images/more.png"></image>-->
		</view>
		<view class="goods_list" v-if="recommend.length>0">
			<view class="goods_unit" v-for="(item,index) in recommend" :key="index" :id="item.goods_id" v-on:click="goods_detail">
				<image class="goods_unit_pic" :style="{height:pic_h}" mode="aspectFill" :src="url+item.imgurl"></image>
				<view class="goods_name">{{item.goods_name.substr(0,9)}}…</view>
				<!-- <view class="sub_goods_name">{{item.title.substr(0,11)}}…</view> -->
				<view class="goods_property">
					<view class="goods_price">￥{{item.price}}</view>
				</view>
				<view class="goods_property">
					<view class="old_price">原价：￥{{item.original}}</view>
					<view class="goods_cash">销量：{{item.sum}}</view>
				</view>
				<view class="goods_commsion" v-if="item.commission!=0">
					<view class="commission_name">佣金</view>
					<view class="commission_price">￥{{item.commission}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<style>
	.banner{width: 96%;margin-top:-10upx;margin-left:2%;margin-right: 2%;}
	.hot_goods{width:96%;margin:0 2% 20upx 2%;border-radius: 20upx;background: #FFFFFF;}	
	.hot_goods_head{width:96%;padding:10upx 2%;display: flex;height:60upx;justify-content: space-between;align-items: center;}
	.head_title{font-size: 32upx;font-weight:bold;}
	.hot_more{font-size: 28upx;color: #9999999;display: flex;justify-content: flex-end;align-items: center;height:80upx;widows:20%;}
	.hot_more image{width:30upx;margin-left:10upx;}
	.hot_goods_list{width:96%;padding:10upx 2%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
	.hot_goods_unit{width:47%;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;overflow:hidden;margin:10upx 0;}
	.hot_goods_unit_pic{width:100%;}
	.hot_goods_unit_title{width:96%;padding:0 2%;height:50upx;font-size: 28upx;}
	.hot_goods_unit_price{width:96%;padding:0 2%;height:50upx;font-size: 32upx;color: #f40601;font-weight: bold;}
	/***********************/
	.constitution{width:96%;margin:0 2% 10upx 2%;border-radius:10upx;background: #F4F4F4;display: flex;
	justify-content: space-between;align-items: flex-start;flex-wrap: wrap;}
	.constitution_unit{width:30%;margin:10upx 0;padding:10upx 1%;background: #FFFFFF;border-radius:8upx;display: flex;justify-content: space-between;align-items: center;}
	.constitution_title{width:57%;height: 120upx;display: flex;justify-content: center;align-items: center;flex-direction:column;}
	.constitution_title_m{width:100%;text-align: center;height: 60upx;font-size:36upx;line-height: 60upx; color:#333333}
	.constitution_title_s{width:100%;text-align: center;height: 40upx;font-size:24upx;line-height: 40upx; color:#999999}
	
	.constitution_unit image{width:43%;}
	/***********************/
	.mask{width:100%;background: #000;opacity: 0.7;z-index: 9999;position: fixed;top:0;left:0;}
	.select_vedio_type{width:70%;padding:0 15%;height: 200upx;z-index: 99999;position: fixed;bottom:0;left:0;display:flex;justify-content: space-between;align-items: center;}
	.select_vedio_unit{width:40%;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.select_vedio_unit image{width:100upx;height:100upx;}
	.select_vedio_unit_name{width:100%;line-height: 60upx;font-size:28upx;color: #FFFFFF;text-align: center;}
	
	.goods_list{width:94%;margin:10upx 3%;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
	.goods_unit{width:49%;background: #FFFFFF;/* box-shadow: 0px 0px 6px #ccc; */margin:10upx 0;display: flex;border-radius: 10upx;overflow: hidden;
	            flex-direction: column;justify-content: space-between;align-items: flex-start;padding-bottom: 10upx;}
	.goods_unit_pic{width:100%;overflow:hidden;}
	.goods_name{width:96%;padding:0 2%;line-height: 40upx;font-size: 28upx;color: #282828;}
	.sub_goods_name{width:96%;padding:0 2%;line-height: 35upx;font-size: 26upx;color:#AAAAAA;}
	.goods_property{width:96%;padding:0 2%;display: flex;justify-content: space-between;align-items: center;height: 40upx;}
	.goods_price{font-size: 36upx;color: #f40601;}
	.old_price,.goods_cash{font-size: 24upx;color: #AAAAAA;}
	.old_price{text-decoration: line-through;}
	.goods_property image{width:50upx;height: 50upx;}
	.goods_commsion{margin-left:2%;width:55%;display: flex;justify-content: space-between;align-items: center;height: 40upx;border-radius:10upx;overflow: hidden;}
	.commission_name{width:50%;line-height: 40upx;height:40upx;font-size:28upx;background:#ef3d19;color: #ffffff;text-align: center;}
	.commission_price{width:50%;line-height: 40upx;height:40upx;font-size:26upx;background:#ffece8;color: #ef3d19;text-align: center;}
	/******************/
	.sort_list{width:96%;margin:0 2%;padding:10upx 0;border-radius: 0 0 10upx 10upx;
	display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
	.bg{background: #fff;}
	.brand_unit{width:25%;padding:10upx 0;margin:0;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.brand_unit image{width:120upx;height: 120upx;background: #FFFFFF;border-radius: 60upx;}
	.sort_unit{width:20%;padding:10upx 0;margin:0;display: flex;justify-content: center;align-items: center;flex-direction: column;}
	.sort_unit image{width:90upx;height: 90upx;background: #FFFFFF;border-radius: 45upx;}
	.sort_name{font-size: 28upx;margin-top: 20upx;}
	.sort_title{width:92%;margin:10upx 2% 0 2%;padding:10upx 2%;display: flex;border-radius: 10upx 10upx 0 0;
	justify-content: space-between;align-items: center;background: #FFFFFF;height: 60upx;}
	
	.title_name{font-size: 32upx;color: #282828;font-weight: bold;background: #FFFFFF;}
	.more{width:30upx;height: 30upx;}
	/******************/
	.swiper{margin: 20upx 0 10upx 0;width:100%;}
	.top_fixed{height: 80upx;margin:0 3% 20upx 3%;width:94%;position: fixed;top:0;left:0;z-index: 999;}
	.sort{height: 80upx;margin:0 3% 20upx 3%;width:94%;}
	.nav{height: 80upx;background-color:#717171; display: flex;align-items: center;justify-content: flex-start;flex-wrap: nowrap;}
	.button{width: 280upx;height: 40upx;line-height: 40upx;  font-size: 28upx;text-align: center;color: #FFFFFF;border-right: 1px solid #FFFFFF;}
	.button:first-child{border:none !important;}
	.font-color{color: #FFFFFF;font-weight: bold;background: #f27e41;height: 80upx;line-height: 80upx;}
	/******************/
	.top{width:92%;margin:0px 2% 6px 2%;padding:0 2%;display: flex;justify-content:space-between;align-items: center;}
	.search{width:98%;background: #E1E1E1;border-radius: 35upx;height: 70upx;overflow: hidden;
	        display: flex;justify-content: flex-start;align-items: center;}
	.search_input{width:70%;height:70upx;color: #282828;line-height: 70upx;font-size: 28upx;padding-left:5%;}
	.search_button{width:30%;display: flex;justify-content: center;align-items: center;border-left: 1px solid #999;font-weight:bold;
				   color: #999999;font-size: 28upx;background: #E1E1E1;height:50upx;line-height: 50upx;}
	.search_button image{width:30upx;margin-right:10upx;}
	.cart{width:55upx;height: 55upx;}
	/******************/
	page,.container{background: #f4f4f4;}
	.lh{height: 120upx;width: 100%;}
	.foot{width:98%;padding:10upx 1% 10upx 1%;background: #FFFFFF;height: 90upx;display: flex;
		  justify-content: space-between;align-items: center;position: fixed;bottom:0;left:0;}
	.foot_unit{width:20%;display: flex;flex-direction: column;justify-content:space-between;
	           align-items: center;height: 80upx;}
	.foot_unit image{width:40upx;height: 40upx;}
	.add{width:80upx;display: flex;justify-content: center;align-items: center;height: 80upx;}
	.add image{width:80upx;height: 80upx;}
	.foot_unit_name{font-size: 24upx;color: #b5b5b5;}
	.foot_current{color: #3de9c7 !important;}
	/**********************************************/
</style>
<script>
	//#ifdef H5
	import wxjs   from '../../jweixin/lib/index.js';
	//#endif
	export default {
		data() {
			return {
				name:'',
				pic_h:'',
				hot_pic_h:'',
				current: 0,
				goods_sort:[],
				start:4,
				// banner:[{'adv_id':1,'type':3,'img':'/static/images/yztang/banner1.jpg'}],
				banner:[],
				banner1:[],
				tongdao_w:'40px',
				tongdao_h:'40px',
				shangcheng_w:'40px',
				shangcheng_h:'40px',
				banner_w:'',
				banner_h:'',
				result:[],
				specs_area:[],
				sale:[],
				recommend:[],
				brand:[],
				height:'',
				share_pic:'',
				share_title:'',
				url: getApp().globalData.url,
				static:getApp().globalData.static,
				tab_current:'mall'
			}
		},
		onLoad(e) {
			var res = uni.getSystemInfoSync();
			var w = res.windowWidth;
			this.tongdao_w = w+'px';
			this.tongdao_h = w/3.75+'px';
			this.shangcheng_w = w+'px';
			this.shangcheng_h = w/3.75+'px';
			this.banner_w = w+"px";
			this.banner_h = w/1.5+"px";
			this.pic_h = w*0.94*0.49+"px";
			this.hot_pic_h = w*0.96*0.96*0.315+"px";
			this.height = res.windowHeight+"px";
			const scene = decodeURIComponent(e.scene);
			var upid    = uni.getStorageSync("upid");
			if(scene=="undefined"||scene==undefined)
			{
				if(upid=="" || upid==undefined || upid=="undefined")
				{
					if(e.upid==undefined)
					{
						uni.setStorageSync("upid",0);
					}
					else
					{
						uni.setStorageSync("upid",parseInt(e.upid));
					}
				}
			}
			else
			{
				uni.setStorageSync("upid",scene);
			}
			// this.initialize();
		},
		onShow(){
			this.start = 4;
			this.initialize();
			//#ifdef H5
			var ua = navigator.userAgent.toLocaleLowerCase();
			if(ua.match(/MicroMessenger/i) == 'micromessenger')
			{
				this.share_config();
			}
			//#endif
		},
		//#ifdef MP-WEIXIN
		onShareAppMessage(res) {
			var member_id = uni.getStorageSync("member_id");
			if(member_id=="")
			{
				var upid = 0;
			}
			else
			{
				var upid = member_id;
			}
			var title    = this.share_title;
			// var imgurl   = this.url + this.banner[0].img;
			var imgurl   = this.share_pic;
			return {
			  title: title,
			  path: '/pages/mall/index?upid='+member_id,
			  imageUrl:imgurl
			}
		},
		onShareTimeline(res)
		{
			var member_id = uni.getStorageSync("member_id");
			if(member_id=="")
			{
				var upid = 0;
			}
			else
			{
				var upid = member_id;
			}
			// var title       = '谷牧之道商城-';
			// var imgurl      = this.url + this.banner[0].img;
			var title    = this.share_title;
			// var imgurl   = this.url + this.banner[0].img;
			var imgurl   = this.share_pic;
			return {
			  title: title,
			  query: 'upid='+upid,
			  imageUrl:imgurl
			}
		},
		//#endif
		onReachBottom:function()
		{
			this.get_goods_list();
		},
		methods: {
			share_config:function()
			{
				var that = this;
				console.log(window.location.href);
				uni.request({
					url: this.url+"/wechat_share",
					data: {url:window.location.href},
					header: {'Content-Type': 'application/json'},
					success: function (res) 
					{
						console.log(res.data);
						wxjs.config({
						  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						  appId: res.data.appId,         // 必填，公众号的唯一标识
						  timestamp: res.data.timestamp, // 必填，生成签名的时间戳
						  nonceStr: res.data.nonceStr,   // 必填，生成签名的随机串
						  signature: res.data.signature,        // 必填，签名
						  jsApiList: ['updateAppMessageShareData','updateTimelineShareData']            // 必填，需要使用的JS接口列表
						});
						wxjs.ready(function () {
							var shareData1 = {
								title:'谷牧之道', // 分享标题
								desc: '全国健康类产品，一站式购物平台，厂家产品会员价', // 分享描述
								link: that.url+'/wap',  // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: that.url+'/web/static/img/a.png', // 分享图标
								// type: '', // 分享类型,music、video或link，不填默认为link
								// dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
								success: function () {
									// alert('成功');
									console.log("设置成功");
								}
							};
							var shareData2 = {
								title:'谷牧之道-全国健康类产品，一站式购物平台，厂家产品会员价', // 分享标题
								link: that.url+'/wap',  // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
								imgUrl: that.url+'/web/static/img/a.png', // 分享图标
								success: function () {
									// alert('成功');
									console.log("设置成功");
								}
							};
							// wxjs.onMenuShareAppMessage(shareData1);
							wxjs.updateAppMessageShareData(shareData1);
							wxjs.updateTimelineShareData(shareData2);
						})
						
					}
				})
			},
			clickImg(res) {
				console.log(res);
				wx.previewImage({
					urls: [res], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			link:function(type,id)
			{
				if(type=="1")
				{
					uni.navigateTo({
						url:"../mall/union?id="+id
					})
				}
				if(type=="2")
				{
					uni.navigateTo({
						url:"../mall/goods_detail?id="+id
					})
				}
				console.log(type);
			},
			test_head:function()
			{
				uni.navigateTo({
					url:"test_head"
				})
			},
			brand_detail:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"brand_detail?id="+id
				})
			},
			goods_list:function(e)
			{
				var sort = e.currentTarget.dataset.type;
				uni.navigateTo({
					url:"goods_list?sort="+sort
				})
			},
			tongdao:function(e)
			{
				uni.navigateTo({
					url:"quanyizhongxin"
				})
			},
			jifenshangcheng:function(e)
			{
				uni.navigateTo({
					url:"integral_goods_list"
				})
			},
			constitution:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"constitution_detail?id="+id
				})
			},
			cart:function()
			{
				var member_id = uni.getStorageSync("member_id");
				if(member_id=="")
				{
					uni.navigateTo({
						url:"/pages/member/login"
					})
				}
				else
				{
					uni.navigateTo({url:"/pages/mall/cart"});
				}
			},
			goods_detail:function(e)
			{
				var id = e.currentTarget.id;
				uni.navigateTo({
					url:"../mall/goods_detail?id="+id
					// url:"../mall/goods_detail?id=93"
				})
			},
			sort_list:function(e)
			{
				var id = e.currentTarget.id;
				console.log("sort_list:::::"+id);
				uni.setStorageSync("sort_id",parseInt(id));
				uni.switchTab({
					url:"../mall/sort_index?id="+id
				})
			},
			get_goods_list:function()
			{
				var that = this;
				//#ifdef MP-WEIXIN
				var type = "weixin";
				//#endif
				//#ifdef APP-PLUS
				var type = "app";
				//#endif
				//#ifdef H5
				var type = "app";
				//#endif
				var member_id = uni.getStorageSync("member_id");
				uni.request({
					url: this.url+'/wechat_goods_list', 
					data: {member_id:member_id,id:0,type:type,start:this.start},
					header: {'Content-Type': 'application/json'},
					success: (res) => {
						console.log(res.data);
						if(res.data.status==1)
						{
							that.start += 4;
							for(var i=0;i<res.data.result.length;i++)
							{
								that.recommend.push(res.data.result[i]);
							}
						}
						else
						{
							uni.showToast({
								title:"我是有底线的",
								duration:1000
							})
						}
					}
				});
			},
			input_:function(e)
			{
				if(e.currentTarget.dataset.name=="name")
				{
					this.name = e.target.value;
				}
			},
			search:function()
			{
				if(this.name=="")
				{
					uni.showToast({
						title:"不能为空",
						duration:2000
					})
				}
				else
				{
					uni.navigateTo({
						url:"/pages/mall/search?name="+this.name
					})
				}
			},
			initialize:function()
			{
				var that = this;
				var member_id = uni.getStorageSync("member_id");
				//#ifdef MP-WEIXIN
				var type = "weixin";
				//#endif
				//#ifdef APP-PLUS
				var type = "app";
				//#endif
				//#ifdef H5
				var type = "app";
				//#endif
				uni.request({
					url: this.url+"/wechat_index",
					data: {member_id:member_id,type:type},
					header: {'Content-Type': 'application/json'},
					success: function (res) 
					{
						that.banner = res.data.banner;
						that.banner1 = res.data.banner1;
						that.goods_sort = res.data.sort;
						that.specs_area = res.data.specs_area;
						that.sale       = res.data.sale;
						that.recommend  = res.data.recommend;
						that.brand      = res.data.big_brand_good_goods;
						that.share_pic  = res.data.share_pic;
						that.share_title = res.data.share_title;
					}
				})
			}
		}
	}

</script>


